import React, { PureComponent } from 'react'
import { View, Text, StyleSheet,Image, ScrollView } from 'react-native'
import { connect } from 'react-redux'
import Spinner from 'react-native-loading-spinner-overlay'
import { createAction, NavigationActions } from '../../../utils'
import { BackIcon, PullView } from '../../../widgets'
import color from '../../../utils/color'
import screen from '../../../utils/screen'
import TimeChooser from '../components/TimeChooser'
import Accordion from '../components/table/Accordion'
import Table from '../components/table'

const testSingle = [{
  title: {
    name: '测试Batch',
    amount: 0,
    yoy: '0%',
    qoq: '0%'
  },
  content: [{
    name: '货币资金',
    amount: 0,
    yoy: '0%',
    qoq: '0%',
    linked: 'Cash'
  },{
    name: '应收账款',
    amount: 0,
    yoy: '0%',
    qoq: '0%',
    linked: 'Receivables'
  },{
    name: '预付账款',
    amount: 0,
    yoy: '0%',
    qoq: '0%',
    linked: 'PrePayment'
  },{
    name: '其他应收款',
    amount: 0,
    yoy: '0%',
    qoq: '0%',
    linked: 'ReceivableOthers'
  },{
    name: '存货',
    amount: 0,
    yoy: '0%',
    qoq: '0%',
    linked: 'Inventory'
  },{
    name: '固定资产',
    amount: 0,
    yoy: '0%',
    qoq: '0%',
    linked: 'FixedAssets'
  },{
    name: '在建工程',
    amount: 0,
    yoy: '0%',
    qoq: '0%',
    linked: 'ConstructionInProgress'
  }]
}]


@connect(({assetliability, loading }) => ({ ...assetliability, isLoading: loading.models.assetliability}))
export default class extends PureComponent {
  static navigationOptions = ({ navigation }) => ({
    title: '明细',
    headerTintColor: 'white',
    headerStyle: {
      backgroundColor: color.theme,
      elevation: 0,
      shadowOpacity: 0,
    },
    headerLeft: ( <BackIcon backInvoke={() => { navigation.goBack(null) }}/>),
  })

  constructor(props) {
    super(props)
    const params = this.props.navigation.state.params || {}
    const initTime = params['initTime'] || {}
    this.state = {
      timeD: initTime
    }
  }

  componentWillMount() {
    this.props.dispatch(createAction("assetliability/initDetail")({}))
  }

  componentDidMount() {
  }

  changeDate = (type, sTime, eTime) => {
    this.setState({
      timeD: {
        startTime: sTime,
        endTime: eTime,
        timeType: type
      }
    }, () => {
      this.fetchD()
    })
  }

  fetchD = () => {
    const { timeD } = this.state
    this.props.dispatch(createAction("assetliability/getAssetLiabilityDetailMsg")(timeD))
  }

  render() {
    const titleContent = {
      name: '类目',
      amount: '金额(万元)',
      yoy: '同比',
      qoq: '环比',
    }
    const { ASSET, ASSETSUMMARY, LIABILITY, LIABILITYSUMMARY, OWNER, LIA_OWNSUMMARY ,isLoading } = this.props;
    const { timeD } = this.state
    return (
      <View style={styles.container}>
        <Spinner visible={isLoading} />
        <TimeChooser changeDate={this.changeDate} initTime={timeD}/>
        <Table onPullRelease={this.fetchD}>
          <Table.Title title={titleContent}/>
          <Table.Body>
            <Accordion
              navigation={this.props.navigation}
              timeD={timeD}
              xtype="assetLiability"
              sections={ASSET}
            />
            <Table.Summary summary={ASSETSUMMARY} />
            <Table.WhiteSpace />
            <Accordion
              navigation={this.props.navigation}
              timeD={timeD}
              xtype="assetLiability"
              sections={LIABILITY}
            />
            <Table.Summary summary={LIABILITYSUMMARY} />
            <Table.WhiteSpace />
            <Accordion
              navigation={this.props.navigation}
              timeD={timeD}
              xtype="assetLiability"
              sections={OWNER}
            />
            <Table.WhiteSpace />
            <Table.Summary summary={LIA_OWNSUMMARY} />
          </Table.Body>
        </Table>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})
